<template>
  <div class="crm-page home-page">
    <div class="page-header">线索详情</div>
    <div class="page-content transparent">
      <div class="page-card">
        <div class="card-title">
          <el-button class="back-btn" size="medium" type="text" icon="el-icon-back" @click="goMainBack()">返回</el-button>
        </div>
        <div class="page-card-content">
          <div class="item-title" style="margin-top:20px">
            基本信息
          </div>
          <div class="card-item">
            <el-row :gutter="10">
              <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="4">
                <span class="title">名称：</span>
                <span class="content">{{ clue.name }}</span>
              </el-col>
              <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="4">
                <span class="title">公司：</span>
                <span class="content">{{ clue.companyName }}</span>
              </el-col>
              <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="4">
                <span class="title">职务：</span>
                <span class="content">{{ clue.position }}</span>
              </el-col>
              <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="4">
                <span class="title">电话：</span>
                <span class="content">{{ clue.phone }}</span>
              </el-col>
              <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="4">
                <span class="title">邮件：</span>
                <span class="content">{{ clue.email }}</span>
              </el-col>
            </el-row>
          </div>
        </div>
      </div>
      <div class="page-card">
        <ClueStatusLine :status="clue.status" @change="handleChangeStatus" />
      </div>
      <el-row :gutter="20">
        <el-col :xs="24" :sm="24" :md="24" :lg="14" :xl="14">
          <div class="page-card">
            <div class="page-card-content">
              <div class="item-title">
                详细信息
              </div>
              <div class="card-item">
                <el-row :gutter="10">
                  <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
                    <span class="title">线索状态：</span>
                    <span class="content">{{ clue.statusText }}</span>
                  </el-col>
                  <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
                    <span class="title">所有人：</span>
                    <span class="content">{{ clue.owner }}</span>
                  </el-col>
                  <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
                    <span class="title">名称：</span>
                    <span class="content">{{ clue.name }}</span>
                  </el-col>
                  <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
                    <span class="title">公司：</span>
                    <span class="content">{{ clue.companyName }}</span>
                  </el-col>
                  <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
                    <span class="title">职务：</span>
                    <span class="content">{{ clue.position }}</span>
                  </el-col>
                  <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
                    <span class="title">行业：</span>
                    <span class="content">{{ clue.industryName }}</span>
                  </el-col>
                  <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
                    <span class="title">线索来源：</span>
                    <span class="content">{{ clue.sourceText }}</span>
                  </el-col>
                  <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
                    <span class="title">地址信息：</span>
                    <span class="content">{{ `${clue.province} ${clue.city} ${clue.county} ${clue.address}` }}</span>
                  </el-col>
                  <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
                    <span class="title">创建人：</span>
                    <span class="content">{{ clue.createName }}</span>
                  </el-col>
                  <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
                    <span class="title">上次修改人：</span>
                    <span class="content">{{ clue.updateName }}</span>
                  </el-col>
                  <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
                    <span class="title">创建时间：</span>
                    <span class="content">{{ formatTime(clue.createTime) }}</span>
                  </el-col>
                  <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
                    <span class="title">上次修改时间：</span>
                    <span class="content">{{ formatTime(clue.updateTime) }}</span>
                  </el-col>
                </el-row>
              </div>
            </div>
          </div>

        </el-col>
        <el-col :xs="24" :sm="24" :md="24" :lg="10" :xl="10">
          <ActivityCard
            :data="{
              name:clue.companyName,
              relateName:clue.name,
              relateId:clue.id
            }"
            :type="1"
            @change="handleCardChange"
          />
          <ActivityListCard v-if="clue.id" ref="listCard" :relateid="clue.id" :type="1" />
        </el-col>
      </el-row>

    </div>
  </div>
</template>
<script>
import ClueStatusLine from '@/components/ClueStatusLine'
import ActivityCard from '@/components/ActivityCard'
import ActivityListCard from '@/components/ActivityListCard'
import { getClue, updateClueStatus } from '@/api/clue'

import { getEnumText, clueStatus, Industrys, clueSource } from '@/utils/enums'
import { formatTime } from '@/utils/tools'

export default {
  name: 'Info',
  components: { ClueStatusLine, ActivityCard, ActivityListCard },
  data() {
    return {
      clue: {

      }

    }
  },
  mounted() {
    const id = this.$route.query.id
    getClue({ id }).then(res => {
      this.clue = res
      if (this.clue.status) {
        this.clue.statusText = getEnumText(clueStatus, this.clue.status)
        this.clue.industryName = getEnumText(Industrys, this.clue.industryId)
      }
      if (this.clue.source) {
        this.clue.sourceText = getEnumText(clueSource, this.clue.source)
      }
    })
  },
  methods: {
    formatTime,
    handleChangeStatus(v) {
      const data = {
        id: this.clue.id,
        status: v
      }
      updateClueStatus(data).then(res => {
        this.clue.status = v
        this.clue.statusText = getEnumText(clueStatus, this.clue.status)
        this.$message({
          type: 'success',
          message: '修改成功'
        })
      }).catch(ex => {
        this.$message({
          type: 'error',
          message: ex.message || '修改失败'
        })
      })
    },
    handleCardChange() {
      this.$refs.listCard.refresh()
    }

  }
}
</script>

